<template>
	<div id="cinema">
			<div class="nav">
				<span>全城<i class="fa fa-caret-down"></i></span>
				<span>品牌<i class="fa fa-caret-down"></i></span>
				<span>特色<i class="fa fa-caret-down"></i></span>
			</div>
			<div>
				<ul>
					<!-- <li>
						<p>
							<span>大地影院延庆金锣店</span>
							<span class="price">38.5</span>
							<span class="price-desc">元起</span>
						</p>
						<p class="address">
							<span>延庆区北街39号H座首层</span>
							<span>100km</span>
						</p>
						<p class="tips">
							<span>小吃</span>
							<span>折扣卡</span>
						</p>
					</li> -->
					<li v-for="item in cinemaList" :key="item.id">
						<p>
							<span>{{item.name}}</span>
							<span class="price">{{item.price}}</span>
							<span class="price-desc">元起</span>
						</p>
						<p class="address">
							<span>{{item.address}}</span>
							<span>{{item.distance}}km</span>
						</p>
						<p class="tips">
							<span>小吃</span>
							<span>折扣卡</span>
						</p>
					</li>
				</ul>
			</div>
		</div>
</template>

<script>
	export default{
			name:'Cinema',
			methods:{
				getCinemaData(){
					var that=this;
					axios.get('/mock/api.json')
					.then(function(response){
						console.log(response);
						if(response.status==200){
							if(response.data && response.data.cinemaList){
								that.cinemaList =response.data.cinemaList;	
							} 
						}
					})
					.catch(function(error){
						console.log(error)
					})
				}
			},
			created(){
				this.getCinemaData();
			},
			data(){
				return{
					cinemaList:[]
				}
			}
		}
</script>

<style scoped>
	#cinema{
			padding-top: 50px;
			padding-bottom: 50px;
		}
		.nav span{
			width: 33%;
			display: inline-block;
			text-align: center;
			height: 45px;
			line-height: 45px;
		}
		.nav{
			border-bottom: 1px solid #ccc;
		}
		i{
			margin-left: 5px;
		}
		li{
			margin: 10px;
			border-bottom: 1px solid #ccc;
		}
		.price{
			color: #E54847;
			margin-left: 5px;
			margin-right: 3px;
		}
		.price-desc{
			color: #E54847;
			font-size: 12px;
		}
		.address span{
			font-size: 12px;
			color: #999;
		}
		.address span:last-child{
			float: right;
		}
		.tips span{
			border: 1px solid #f90;
			color: #f90;
		}
		.tips{
			margin: 10px 0;
		}
</style>
